<script lang="ts" setup>
  import { GameGroup } from '@/types/game';
  import { computed } from 'vue';
  import GroupPlayerAdd from './group-player-add.vue';

  const props = defineProps<{
    gameGroup: GameGroup;
  }>();

  const emit = defineEmits(['edit', 'delete', 'userAdded', 'userRemove']);

  const groupEmptyUsers = computed(() => {
    const count = props.gameGroup.users.length;
    const emptyUsers: number[] = [];
    if (count < 4) {
      for (let i = count; i < 4; i += 1) {
        emptyUsers.push(i);
      }
    } else if (count % 2 === 1) {
      emptyUsers.push(1);
    }
    return emptyUsers;
  });
</script>

<template>
  <div class="group-item">
    <div class="group-item-header">
      <div>
        <div class="group-item-name">{{ gameGroup.groupName }}</div>
        <div class="group-item-time">开球时间：{{ gameGroup.startTime }}</div>
      </div>
      <div class="group-item-action">
        <a-space>
          <a-link class="second-btn" @click="emit('edit')">编辑</a-link>
          <a-link class="second-btn" @click="emit('delete')">删除</a-link>
        </a-space>
      </div>
    </div>
    <div class="group-item-body">
      <a-row :gutter="12">
        <a-col v-for="user in gameGroup.users" :key="user.id" :span="6">
          <div class="user-info">
            <div class="user-img">
              <img v-if="user.profile" :src="user.profile" />
            </div>
            <div class="user-right">
              <div class="user-name">
                {{ user.nickname }}
              </div>
              <div class="user-sub-info">
                <a-space>
                  <span>{{ user.sex ? '男' : '女' }}</span>
                  <span>{{ user.ageType === 1 ? '青少年' : '成人' }}</span>
                </a-space>
              </div>
              <div class="user-sub-info">
                最佳杆数：{{ user.best || '-' }}
              </div>
            </div>

            <a @click="emit('userRemove', user)">
              <icon-close />
            </a>
          </div>
        </a-col>
        <a-col v-for="empty in groupEmptyUsers" :key="empty" :span="6">
          <div class="user-info">
            <div class="user-img"> </div>
            <div class="user-add">
              <GroupPlayerAdd
                :game-id="gameGroup.gameId"
                :group-id="gameGroup.id"
                @close="emit('userAdded')"
              />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .group-item {
    border: 1px solid var(--color-border-2);
    border-radius: 3px;
    .second-btn {
      display: none;
    }

    &:hover {
      .second-btn {
        display: inline-block;
      }
    }

    &-header {
      padding: 5px 12px;
      border-radius: 3px 3px 0 0;
      background: rgb(var(--gray-1));
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--color-border-2);
    }
    &-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    &-time {
      font-size: 12px;
      color: var(--color-text-2);
    }

    &-body {
      padding: 20px 12px 12px;
    }
  }

  .user-info {
    display: flex;
    position: relative;
    a {
      display: none;
      cursor: pointer;
      color: rgb(var(--red-6));
      position: absolute;
      right: 10px;
    }
    &:hover {
      a {
        display: block;
      }
    }
  }
  .user-img {
    width: 32px;
    height: 32px;
    background: rgb(var(--gray-2));
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    overflow: hidden;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  .user-right {
    flex: 1;
    margin-left: 8px;
  }
  .user-name {
    font-weight: 600;
    line-height: 20px;
  }
  .user-sub-info {
    font-size: 12px;
    line-height: 20px;
    color: var(--color-text-2);
  }
  .user-add {
    padding-top: 4px;
  }
</style>
